<template>
  <div class="fei">
    <ul>
      <li v-for="y in yyy" v-on:click="y.position =!y.position">
        <h2>{{y.name}}</h2>
        <h3>{{y.email}}</h3>
      </li>
    </ul>
    <button v-on:click="deleteMsg">删除</button>
  </div>

</template>

<script>
  export default{
    name: 'yang',
    props: {
      yyy: {
        type: Array,
        required: true
      }
    },

    data(){
      return {}
    },

    methods: {
      deleteMsg: function () {
        this.yyy.pop();
      }
    }
  }
</script>

<style scoped>
  people {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
    color: #ff00ff;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
  }

  li {
    flex-grow: 1;
    flex-basis: 200px;
    text-align: center;
    padding: 30px;
    border: 1px solid #222;
    margin: 10px;
  }


</style>
